<!-- 我的地址 -->
<template>
	<div class="page_wrap">
		<header>
			<div class="h_left">
				<i class="iconfont iconarrowLeft-fill" @click="$router.go(-1)"></i>
			</div>
			<div class="h_center"><span>我的地址</span></div>
			<div class="h_right">
				<i class="iconfont icongengduo" style="visibility: hidden;"></i>
			</div>
		</header>

		<div class="main">
			<ul>
				<li v-for="(x, indexX) in dataList">
					<div class="row1">
						<div class="li_left">
							<p class="p1">{{x.consigneeName}} {{x.consigneeMobile}} <i v-if="x.isDefault">默认</i></p>
							<p class="p2">{{x.province}} {{x.city}} {{x.region}}</p>
							<p class="p3">{{x.addrInfo}}</p>
						</div>
						<div class="li_right"></div>
					</div>
					<div class="row2">
						<i class="iconfont iconedit2" @click=""></i>
						<i class="iconfont icondelete" @click="delFN(x, indexX)"></i>
					</div>
				</li>
			</ul>
		</div>

		<footer>
			<div class="f_content" @click="addFN">
				<div class="btn">
					<span>添加地址</span>
				</div>
			</div>
		</footer>
	</div>
</template>

<script>
	import { Toast, ActionSheet, Dialog } from 'vant';

	export default {
		data() {
			return {
				dataList: [],
			};
		},
		watch: {},
		computed: {},
		components: {},
		beforeRouteEnter(to, from, next) {
			next();
		},
		beforeRouteLeave(to, from, next) {
			next();
		},
		activated() {},
		deactivated() {},
		created() {},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.dataList = [{
					addrId: '001',
					addrInfo: '广州市海珠区石榴岗路255号',
					consigneeName: '张三',
					consigneeMobile: '15877220245',
					province: '广东省',
					city: '广州市',
					region: '海珠区',
					isDefault: true,
				}, {
					addrId: '002',
					addrInfo: '广州市白云区白云山',
					consigneeName: '李四',
					consigneeMobile: '15622054692',
					province: '广东省',
					city: '广州市',
					region: '白云区',
					isDefault: false,
				}, {
					addrId: '003',
					addrInfo: '广州市番禺区大夫山森林公园南门对面菜鸟驿站',
					consigneeName: '赵六',
					consigneeMobile: '15455236398',
					province: '广东省',
					city: '广州市',
					region: '番禺区',
					isDefault: false,
				}];
			},
			delFN(item, index) {
				if(this.dataList.length <= 1) {
					return Toast("至少保留一条地址哦");
				}

				Dialog.confirm({
					title: '',
					message: '确定删除该地址吗',
					cancelButtonText: '取消',
					confirmButtonText: '确定',
					closeOnClickOverlay: true,
				}).then(() => {
					fn(this);
				}).catch(() => {});

				function fn(_this) {
					_this.dataList.splice(index, 1);
				}
			},
			addFN() {
				Toast({
					duration: 1500,
					message: "你别急，程序还没开发完呢！",
					forbidClick: true,
				});
			},
		}
	}
</script>

<style lang='scss' scoped>
	@import '~@/assets/css/mixin';
	.page_wrap {
		width: 100%;
		height: 100%;
	}
	
	.main {
		padding: rem(90) 0 0 0;
		ul {
			li {
				background: #fff;
				box-shadow: rem(0) rem(1) rem(10) #eee;
				margin: 0 0 rem(20) 0;
				padding: rem(0) rem(20);
				.row1 {
					padding: rem(10) 0;
					p {
						font-size: rem(28);
						color: $fc;
						line-height: rem(50);
					}
					.p1 {
						font-weight: bold;
						i {
							color: $theme-color;
						}
					}
					.p2 {}
					.p3 {}
				}
				.row2 {
					height: rem(80);
					display: flex;
					justify-content: flex-end;
					align-items: center;
					border-top: rem(1) solid #eee;
					i {
						font-size: rem(46);
						color: $fc;
						&:first-child {
							margin: 0 rem(30) 0 0;
						}
					}
				}
			}
		}
	}
	
	footer {
		padding: 0 rem(40);
		position: fixed;
		bottom: rem(20);
		left: 0;
		width: 100%;
		.f_content {
			display: flex;
			justify-content: center;
			align-items: center;
			height: rem(80);
			background: $theme-color;
			border-radius: rem(80);
			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				span {
					color: #fff;
					font-size: rem(28);
				}
			}
		}
	}
</style>